<template>
  <!-- // 地图 -->
  <div class="homePageCards">
    <div class="grollDiv">
      <div class="flex flex-warp">
        <label class="checklist iCheck" v-for="(item, index) in resourceTypes" :key="index">
          <input class="checkbox" type="checkbox" v-model="item.value" @change="check(item)" />
          <span class="fontSize18 fontWeight">{{ item.name }}</span>
        </label>
      </div>
    </div>
    <div class="full-box" @click="fullscreen">
      <img src="../../../../assets/img/full.png" alt="">
      <span>全屏</span>
    </div>
    <div class="full">
      <div class="full-boxs">
        <img src="../../../../assets/img/break.png" alt="">
        <span>停电重要用户</span>
      </div>
      <div class="full-boxs">
        <img src="../../../../assets/img/recover.png" alt="">
        <span>复电重要用户</span>
      </div>
    </div>
    <div id="map" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import sjccKey from "../../../../config/sjmapkey";
export default {
  name: "MapContent",
  components: {},
  data: function () {
    return {
      map: null,
      geo: null,
      geocodingTask: null,
      resourceTypes: [
        {
          name: "配电线路",
          value: false
        },
        {
          name: "台区",
          value: false
        },
        {
          name: "重要用户",
          value: false
        }
      ],
      popupInfoWindow: null,
      whereHouseList: [
        {
          id: "1xx",
          longitude: 113.29483316315874,
          latitude: 31.87961581398725,
          time: "2021-08-12 15:00:00",
          address: "随州市随县柳林镇阳光大道钰丰集团",
          person: "陈今歌",
          userType: "重要用户",
          line: "10kV柳21开关红蓝线",
          status: "已复电",
          statusCode: 1
        },
        {
          id: "2xx",
          longitude: 113.43975529120443,
          latitude: 31.991373255426004,
          time: "2021-08-12 15:00:00",
          address: "随州市随县柳林镇阳光大道钰丰集团",
          person: "陈今歌",
          userType: "重要用户",
          line: "10kV柳21开关红蓝线",
          status: "已复电",
          statusCode: 1
        },
        {
          id: "3xx",
          longitude: 113.13975529120443,
          latitude: 31.491373255426004,
          time: "2021-08-12 15:00:00",
          address: "随州市随县柳林镇阳光大道钰丰集团",
          person: "陈今歌",
          userType: "重要用户",
          line: "10kV柳21开关红蓝线",
          status: "已复电",
          statusCode: 1
        },
        {
          id: "4xx",
          longitude: 113.11975529120443,
          latitude: 31.991373255426004,
          time: "2021-08-12 15:00:00",
          address: "随州市随县柳林镇阳光大道钰丰集团",
          person: "陈今歌",
          userType: "重要用户",
          line: "10kV柳21开关红蓝线",
          status: "未复电",
          statusCode: 0
        },
        {
          id: "5xx",
          longitude: 113.61975529120443,
          latitude: 32.2373255426004,
          time: "2021-08-12 15:00:00",
          address: "随州市随县柳林镇阳光大道钰丰集团",
          person: "陈今歌",
          userType: "重要用户",
          line: "10kV柳21开关红蓝线",
          status: "已复电",
          statusCode: 1
        }
      ],
      keyword: "随县"
    };
  },
  mounted() {
    this.init();
    window.handleSee = this.handleSee;
  },
  computed: {
    typeNames() {
      return this.resourceTypes.filter((i) => i.value === true);
    }
  },
  methods: {
    fullscreen() { // 进入全屏
      var docElm = document.getElementById("map"); // 指定容器id
      if (!this.FullScreen) {
        // 兼容W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
          // 兼容FireFox
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
          // 兼容Chrome等
          docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) { // 兼容IE11
          docElm.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        this.FullScreen = !this.FullScreen;
      }
    },
    check(val) {
      this.resourceTypes.forEach((element) => {
        if (element.name !== val.name) {
          element.value = false;
        }
      });
      const param = this.typeNames;
      this.$emit("typeNames", param);
    },
    init() {
      epgis.tokenTask.login(sjccKey.appkey, sjccKey.appsecret).then(res => { this.initMap(); });
    },
    // 申请的key和sn
    initMap() {
      const self = this;
      self.map = new epgis.Map({
        // 地图绑定的DOM元素ID
        container: "map",
        // 地图样式
        style: "aegis://styles/aegis/Streets",
        // 默认缩放层级
        zoom: 7.5,
        // 地图中心点
        // center: [114.36730140947924, 30.574022147218216],
        // 随县
        center: [113.29483316315878, 31.87961581398723],
        // center: [110.73032848411, 32.037326322317],
        // 随州
        // center: [113.37377, 31.717497],
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei"
        // renderWorldCopies: false
      });
      self.map.on("load", function (e) {
        // window.top.postMessage("map_load_success", "*");

        var districtTask = new epgis.DistrictTask();
        // 行政区划名称查询行政区划;
        districtTask
          .searchDistrict({
            keyword: self.keyword,
            // 建议直辖市取2，其他省份取1，提升请求速度
            subdistrict: 2,
            extension: true,
            isEncode: false
          })
          .then((result) => {
            let features = [];
            let featuresPolygon = [];
            // 主要区分直辖市和其他省份;
            const district =
              result.districts[0].sub_districts.length == 1
                ? result.districts[0].sub_districts[0]
                : result.districts[0];
            const shape = district.shape;
            if (shape.type == "MultiPolygon") {
              // eslint-disable-next-line no-redeclare
              for (const o in shape.coordinates) {
                features = features.concat(shape.coordinates[o]);
                featuresPolygon = featuresPolygon.concat(shape.coordinates[o]);
              }
            } else {
              features.push(shape.coordinates[0]);
              featuresPolygon = featuresPolygon.concat(shape.coordinates);
            }
            // 行政区画面;
            self.map.addLayer({
              id: "power-polygon",
              type: "fill",
              source: {
                type: "geojson",
                data: {
                  type: "FeatureCollection",
                  features: [
                    {
                      type: "Feature",
                      geometry: {
                        type: "Polygon",
                        coordinates: featuresPolygon
                      }
                    }
                  ]
                }
              },
              paint: {
                "fill-color": "#dae4fa",
                "fill-opacity": 0.6
              }
            });
            // 行政区划边界线
            self.map.addLayer({
              id: "power-line",
              type: "line",
              source: {
                type: "geojson",
                data: {
                  type: "FeatureCollection",
                  features: [
                    {
                      type: "Feature",
                      geometry: {
                        type: "MultiLineString",
                        coordinates: features
                      }
                    }
                  ]
                }
              },
              paint: {
                "line-color": "#3561fd",
                "line-width": 2,
                "line-dasharray": [0.5, 0.5]
              }
            });
            // 绑定仓库弹窗
            self.popupInfoWindow = new epgis.Popup({
              closeButton: false,
              closeOnClick: false,
              anchor: "top-left",
              offset: [10, 10]
            });
            // 画点
            self.whereHouseList.forEach((item) => {
              // var url = require("../../../../assets/img/recover.png");
              var url = null;
              if (item.statusCode == 0) {
                url = require("../../../../assets/img/break.png");
              } else if (item.statusCode == 1) {
                url = require("../../../../assets/img/recover.png");
              }
              self.map.loadImage(url, (error, image) => {
                console.log(item.id + "poi", "??????item.id");
                self.map.addImage(item.id + "poi", image);
                console.log(self.map.hasImage(item.id + "poi"), "??self.map.hasImage(item.id);");
                self.map.addLayer({
                  id: item.id,
                  type: "symbol",
                  source: {
                    type: "geojson",
                    data: {
                      type: "FeatureCollection",
                      features: [
                        {
                          type: "Feature",
                          geometry: {
                            type: "Point",
                            coordinates: [item.longitude, item.latitude]
                          },
                          properties: {
                            name: ""
                          }
                        }
                      ]
                    }
                  },
                  layout: {
                    "icon-image": item.id + "poi",
                    "icon-size": 0.8, // 图标大小
                    "icon-ignore-placement": true,
                    "text-ignore-placement": false,
                    "text-size": 12,
                    "text-anchor": "top",
                    "text-allow-overlap": false,
                    "icon-anchor": "center",
                    "text-offset": [0, 0],
                    "text-max-width": 8,
                    "text-font": ["Microsoft YaHei Regular"]
                  },
                  paint: {
                    "text-color": "#555252",
                    "text-halo-color": "#FFFFFF",
                    "text-halo-width": 1.33333
                  }
                });
              });
              // 监听鼠标进入事件
              self.map.on("mouseenter", item.id, function (e) {
                // self.map.panTo([e.lngLat.lng, e.lngLat.lat]);
                // const url = require("@/assets/img/ckDetail.png");
                self.popupInfoWindow.setLngLat(e.features[0].geometry.coordinates)
                  .setHTML(
                    `<div style="width:274px;height:190px;display:flex;flex-direction:column;padding:5px">
                    <div style="width:100%;height:25px;display:flex;align-items:center;justify-content:space-between;border-bottom: 1px solid #D7D7D7;">
                      <div style="flex:1;display:flex;align-items:center;">
                        <div class="popupBg"></div>
                        <p style="font-size:15px;color:#333333;font-weight:700">基本信息</p>
                      </div>
                      <div style="width:66px;color:#3561fd;text-decoration:underline;cursor: pointer;" onclick="handleSee(1)"><p style="font-size:15px;">查看更多</p></div>
                    </div>
                    <div style="width:100%;display:flex;flex-direction:column;margin-top:12px">
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">受理时间：</p><p style="flex:1">${item.time}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">故障地点：</p><p style="flex:1">${item.address}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">工作负责人：</p><p style="flex:1">${item.person}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">用户类型：</p><p style="flex:1">${item.userType}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">所属线路：</p><p style="flex:1">${item.line}</p></div>
                       <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">复电状态：</p><p style="flex:1">${item.status}</p></div>
                    </div>
                  </div>`
                  )
                  .addTo(self.map);
              });
              // 监听鼠标移出事件
              // self.map.on("mouseleave", item.id, function (e) {
              //   self.popupInfoWindow.remove();
              // });
            });

          });
      });
      // self.map.addControl(
      //   new SGMap.ScaleControl({
      //     maxWidth: 80,
      //     unit: "metric"
      //   }),
      //   "bottom-left"
      // );
      self.map.on("click", function (e) {
        self.popupInfoWindow.remove();
        console.log(123);
      });
    },
    handleSee(val) {
      console.log(val);
    }
  }
};
</script>

<style scoped lang="less">
:deep(.popupBg) {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-image: url("../../../../assets/img/ckDetail.png");
  background-repeat: no-repeat;
}
.homePageCards {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 5px;
  #map {
    border-radius: 5px;
  }
}
.grollDiv {
  // width: 360px;
  // height: 10%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  top: 10px;
  left: 10px;
  z-index: 9;
  color: #fff;
  font-size: 12px;
  // line-height: 25px;
  padding: 10px;
  padding-right: 0;
  border-radius: 5px;

  .flex-warp {
    flex-wrap: wrap;
  }

  .checklist {
    display: flex;
    align-items: center;
    // width: 120px;
    // margin-top: 8px;
    box-sizing: border-box;
    text-align: center;
    margin-right: 20px;

    input {
      width: 16px;
      height: 16px;
      margin-right: 5px;
      cursor: pointer;
    }

    span {
      color: #000;
    }
  }
}
input[type="checkbox"] {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
}

input[type="checkbox"]::after {
  position: absolute;
  top: 0;
  color: #000;
  width: 16px;
  height: 16px;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: " ";
  border-radius: 3px;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  background-color: #0649d7;
}
.full-box {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  z-index: 9;
  background-color: #fff;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;

  img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}
.full {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 9;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #000;
  width: 160px;
  height: 70px;

  .full-boxs {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    z-index: 9;
    background-color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 5px;

    img {
      width: 25px;
      height: 25px;
      margin-right: 5px;
    }
  }
}
:deep(.epgis-popup) {
  max-width: 600px !important;
}
</style>
